<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>APP</title>
		<link href="css/weui.min.css" rel="stylesheet" />
		<link href="css/jquery-weui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/flex.css" rel="stylesheet" />
		<link href="fonts/iconfont.css" rel="stylesheet" />
		<script src="js/immersed.js"></script>
	</head>
	<script>
		var statusHeight = STATUSBAR_HEIGHT + 44;
		var styleObj = document.createElement('style');
		styleObj.type = 'text/css';
		styleObj.innerHTML=".status-bar-height{height:"+statusHeight+"px}";
		document.getElementsByTagName('HEAD').item(0).appendChild(styleObj);
	</script>
	<style>
	body{
		background-color: #eee;
	}
	.goods-info{
		
	}
	.goods-info .info{
		padding: 10px;
		background-color: #fff;
	}
	.goods-info .info .brief{
		font-size: 14px;
		color:#999
	}
	.goods-info .info .price{
		color:#ff0000
	}
	.goods-info .info .price span{
		font-size: 12px;
	}
	.goods-info .pics{
		padding: 10px;
	}
	.goods-info .pics img{
		width: 100%;
		display: block;
		margin-bottom: 10px;
	}
	
	.video {
        background-color: #000;
        position: relative;
    }
    
    .video img {
        width: 100%;
        display: block;
        opacity: .3;
    }
    
    .video .icon-videofill {
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -30px;
        margin-top: -30px;
        width: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 50px;
        text-align: center;
        border-radius: 50%;
    }
    
    .video-ios {
        background-color: #000;
        height: 250px;
        overflow: hidden;
    }
	
		
	</style>

	<body>
		<div id="app">

			<div class="xiaoyi-header header-red" id="header">
				<div class="xiaoyi-header-left"><i class="iconfont icon-back" onclick="wsClose()"></i></div>
				<div class="xiaoyi-header-title" v-html="goodsInfo.title"></div>
				<div class="xiaoyi-header-right"><i class="iconfont icon-share" @click="share"></i></div>
			</div>
			
			<div class="status-bar-height"></div>


<template v-if="loading == 'inits'">
	<div flex="main:center cross:center" style="width:100%; height: 400px; ">
		<div class="jushi-loader">Loading...</div>
	</div>
</template>

		<template v-if="goodsInfo.video_id>0">
				<div class="video-ios" v-if="os=='Android'"> 
					<video id="video" controls preload="auto" width="100%" height="100%" x-webkit-airplay="true" webkit-playsinline="true" :poster="goodsInfo.video_img+'@!800x440'" :src="goodsInfo.video_url"></video>
				</div>
				<div class="video-ios" v-if="os=='iOS'">
					<video id="video"  playsinline="true" controls="controls" preload="auto" :poster="goodsInfo.video_img+'@!800x440'" width="100%" height="100%">
						<source :src="goodsInfo.video_url">
					</video>
				</div>
			</template>

<template v-if="loading == 'show'">
<div class="goods-info">
	<div class="info line-bottom">
		<div class="title" v-html="goodsInfo.title"></div>
		<div class="brief" v-html="goodsInfo.brief"></div> 
		<div class="brief">货号：{{goodsInfo.sn}}</div>
		<div class="price"><span>成本：</span>&yen;{{goodsInfo.cost}}<span style="margin-left: 20px;">建议零售：</span>&yen;{{goodsInfo.price}}</div>
	</div>
	<div style="padding: 10px 10px 0 10px;">
		<a v-if="goodsInfo.is_favor==null" href="javascript:;" class="weui-btn weui-btn_default" @click="favor"><i class="iconfont icon-favor"></i> 收藏</a>
		<a v-else href="javascript:;" class="weui-btn weui-btn_default" @click="favor"><span style="color:red"><i class="iconfont icon-favorfill"></i> 收藏</span></a>
	</div>
	<div class="pics"> 
		<img :src="vo+'@!auto800'" v-for="(vo,index) in goodsInfo.pics" @click="showPics(goodsInfo.pics,goodsInfo.brief,index)">
	</div>
</div>
</template>

		</div>
		
		<div id="toTop" onclick="Top()">
				<i class="iconfont icon-top"></i>
			</div>
			
			
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery-weui.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/smarge.js"></script>
		<script src="js/jquery.lazyload.js"></script>
		<script src="js/systemShare.js"></script>
		<script src="js/wxShare.js"></script>
		<script src="js/md5.min.js"></script>
		<script src="js/common.js"></script>
		
		<script type="text/javascript" charset="utf-8">
			mui.init();
			
			mui.plusReady(function() {
				var vm = new Vue({
					el: "#app",
					data: {
						goods_id: getUrlParam('id'),
						goodsInfo:'',
						os: plus.os.name,
						loading: 'inits', 
					},
					mounted: function() {
						this.inits();
					},
					methods: {
						inits: function() {
							
							var vm = this;
							
							Get(SERVER_URL +"&c=Goods&a=details", { 
								id: vm.goods_id,
							}, function(data) {  
								if(data.status) {
									vm.goodsInfo = data.info;
									log(vm.goodsInfo);
									vm.loading = 'show'
								} else {
									mui.toast(data.info); 
								}
							})
							

							$(document).scroll(function() {
								var scrollTop = $(this).scrollTop();
								if(scrollTop > 1500) {
									$("#toTop").show();
								} else {
									$("#toTop").hide();
								}
							});
							
						},
						favor : function(){
							var vm = this,id = vm.goodsInfo.id ;
							Get(SERVER_URL+"&c=Favor&a=setFavor",{id:id},function(data){
								if(data.status){
									if(data.info == 'add') {
										vm.$set(vm.goodsInfo, 'is_favor', {id:id});
									}
				
									if(data.info == 'delete') {
										vm.$set(vm.goodsInfo, 'is_favor', null);
									}

								}
							})
						},
						showPics: function(pics,text,index) {
							Smarge.set('GoodsInfo', {pics:pics,text:text,index:index});
							clicked('goods_show.html', 'zoom-fade-out');  
						},
						share : function(){
							var vm = this;
							var goodsInfo = vm.goodsInfo
							if(plus.os.name == 'Android') {
								plus.nativeUI.actionSheet({
									title: "分享",
									cancel: "取消",
									buttons: [{
										title: "一键转发"
									}, {
										title: "转发链接"
									}, {
										title: "下载组图"
									}, {
										title: "复制描述"
									}]
								}, function(e) {
									var index = e.index;
									switch(index) {
										case 0:
											break;
										case 1:
											easyShare(goodsInfo.pics, '【价格】' + goodsInfo.price + '\n【描述】' + goodsInfo.brief);
											break;
										case 2:
											shareLink(goodsInfo.brief + ',' + goodsInfo.price + '元', goodsInfo.pics[0], "http://shop.51jushi.com/index.php?m=Store&c=index&a=goods&id="+ goodsInfo.id);
											break;
										case 3:
											DownloadPics(goodsInfo.pics)
											break;
										case 4:
											copyToClip('【标题】' + goodsInfo.title + '\n【价格】' + goodsInfo.price + '\n【描述】' + goodsInfo.brief);
											break;
										default:
											// 其它
											break;
									}
								});
							}

							if(plus.os.name == 'iOS') {
								plus.nativeUI.actionSheet({
									title: "分享",
									cancel: "取消",
									buttons: [{
											title: "一键转发"
										},
										{
											title: "转发链接"
										},
										{
											title: "下载组图"
										},
										{
											title: "复制描述"
										}
									]
								}, function(e) {
									var index = e.index;
									switch(index) {
										case 0:
											break;
										case 1:
											copyToClip('【标题】' + goodsInfo.title + '\n【价格】' + goodsInfo.price + '\n【描述】' + goodsInfo.brief);
											jushiShare.share(goodsInfo.pics)
											break;
										case 2:
											jushiShare.share(goodsInfo.pics[0], "http://shop.51jushi.com/index.php?m=Store&c=index&a=goods&id="+ goodsInfo.id, goodsInfo.brief + ',' + goodsInfo.price + '元')
											break;
										case 3:
											DownloadPics(goodsInfo.pics)
											break;
										case 4:
											copyToClip('【标题】' + goodsInfo.title + '\n【价格】' + goodsInfo.price + '\n【描述】' + goodsInfo.brief);
											break;
										default:
											// 其它
											break; 
									}
								});
							}
						}
					}
				})

			});
		</script>
	</body>

</html>